<template>
	<view class="page-wrapper">
		<form @submit="formSubmit">
			<view class="form">
				<view class="form-wrapper">
					<view class="uni-form-item uni-column">
						<view class="title">收货人</view>
						<input class="uni-input" name="name" placeholder="收货人" v-model="name" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">手机号</view>
						<input class="uni-input" name="mobile" placeholder="手机号" v-model="mobile" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">省市区</view>
						<input  class="uni-input" name="address" placeholder="请选择省市区" v-model="address.province + address.city + address.county" @click="onChangeAddress" disabled="" />
						<image src="../../../../static/img/public/position.png" mode="widthFix"></image>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">详细地址</view>
						<input class="uni-input" name="street" placeholder="道路、门牌号、小区、单元等" v-model="address.street" />
					</view>
					<view class="uni-form-item uni-column item-switch" style="border: none">
						<view class="title">设为默认地址</view>
						<view>
							<switch name="isDefault" style="transform:scale(0.6);" color="#007AFF" :checked="isDefault"  @change="switchC" />
						</view>
					</view>
					<span style="color: #FD6F00; font-size: 26rpx; margin-left: 30rpx" @click="deleteAddress">删除收货地址</span>
				</view>
			</view>
			<button form-type="submit" class="save-btn">保存</button>
		</form>
	</view>
</template>

<script>
	import {api} from '@/util/api.js';
	
	export default {
		data() {
			return {
				id: null,
				name: '',
				mobile: '',
				address: {
					province: '',
					city: '',
					county: '',
					street: '',
					lat: null,
					lng: null
				},
				isDefault: false
			}
		},
		methods: {
			formSubmit(e) {
				
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				
				if(formdata.name === '') {
					wx.showToast({
						title: '姓名不能为空',
						mask: 'true',
						icon: 'none'
					})
				} else {
					if(formdata.mobile === '') {
						wx.showToast({
							title: '手机号不能为空',
							mask: 'true',
							icon: 'none'
						})
					} else {
						if(formdata.address === '') {
							wx.showToast({
								title: '省市区不能为空',
								mask: 'true',
								icon: 'none'
							})
						} else {
							if(formdata.street === '') {
								wx.showToast({
									title: '详细地址不能为空',
									mask: 'true',
									icon: 'none'
								})
							} else {
								let isMain;;
								if(formdata.isDefault) {
									isMain = 1;
								} else {
									isMain = 0;
								}
								
								uni.showModal({
								  title: '提示',
								  content: '确定保存内容？',
								  confirmText: '保存',
								  confirmColor: '#0481F9',
								  cancelText: '取消',
								  success: (res) => {
								    if (res.confirm) {
										api.updateAddress({
											id: this.id,
											name:formdata.name,
											mobile: formdata.mobile,
											province: this.address.province,
											city: this.address.city,
											district: this.address.county,
											lat: this.address.lat,
											lng: this.address.lng,
											street: formdata.street,
											is_main: isMain
											
										}, res => {
											if(res.code === 200) {
												wx.showToast({
													title: '修改成功',
													mask: 'true',
													icon: 'success'
												});
												wx.navigateBack();
											}
										});
								    } else if (res.cancel) {
								      console.log('用户点击取消')
								    }
								  }
								})
							}
						}
					}
				}
			},
			onChangeAddress() {
				uni.chooseLocation({
					success:(res) =>  {
						var reg = "(?<province>[^省]+省|.+自治区|上海市|北京市|天津市|重庆市|内蒙古自治区|.+特别行政区)?(?<city>[^市]+市|.+自治州)?(?<county>[^县]+县|.+区|.+镇|.+局)?(?<town>[^区]+区|.+镇)?(?<village>.*)";
						console.log(res.address.match(reg))
						var result = res.address.match(reg);
						this.address.province = result.groups.province;
						this.address.city = (typeof result.groups.city !== 'undefined') ? result.groups.city : result.groups.province;
						this.address.county = (typeof result.groups.county !== 'undefined') ? result.groups.county : (typeof result.groups.city !== 'undefined') ? result.groups.city : result.groups.province;
						this.address.street = (typeof result.groups.town) === "undefined" ? result.groups.village : result.groups.town + result.groups.village;
						this.address.lat = res.latitude;
						this.address.lng = res.longitude;
					},
					fail:(err) =>  {
						console.log(err)
					}
				});
			},
			deleteAddress() {
				uni.showModal({
					title: '提示',
					content: '确定删除该地址？',
					confirmText: '确定',
					confirmColor: '#0481F9',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							api.deleteAddress({id: this.id}, res => {
								if(res.code === 200) {
									wx.showToast({
										title: '删除成功',
										mask: 'true',
										icon: 'success'
									});
									wx.navigateBack();
								}
							})
						
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			//其实完全没有必要修改data里的isDefault,因为提交表单不是通过这条数据提交的
			switchC(e) {
				this.isDefault = e.target.value;
			}
		},
		onLoad(option) {
			let res = JSON.parse(option.obj);
			console.log(res)
			this.id = res.id;
			this.name = res.name;
			this.mobile = res.mobile;
			this.address.province = res.province;
			this.address.city = res.city;
			this.address.county = res.district;
			this.address.street = res.street;
			this.address.lat = res.lat;
			this.address.lng = res.lng;
			if(res.is_main === 1) {
				this.isDefault = true;
			} else {
				this.isDefault = false;
			}
		}
	}
</script>

<style scoped>
	.page-wrapper {
		height: 100%;
		width: 100%;
	}
	.form {
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
		padding: 20rpx 20rpx 130rpx 20rpx
	}
	.form-wrapper {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.form-wrapper>view {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx;
		border-bottom: 1rpx solid #e6e6e6
	}
	.form-wrapper>view:last-child {
		border: none
	}
	.form-wrapper>view>.title {
		flex-shrink: 0;
		font-size: 26rpx;
		width: 180rpx;
		
	}
	.form-wrapper>view>input {
		flex-grow: 1;
		margin-left: 10rpx;
		font-size: 22rpx;
	}
	.form-wrapper>view>p {
		flex-grow: 1;
		margin-left: 10rpx;
		font-size: 22rpx;
		color: #808080;
	}
	
	.form-wrapper>view>image {
			width: 25.5rpx;
			flex-shrink: 0;
	}
	
	.item-switch {
		justify-content: space-between;
	}
	
	
	.save-btn {
		position: absolute;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 602rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
	}
</style>
